<template>
  <div class="coupongift_list">
    <div class="search-box">
      <Row type="flex" justify="space-between">
        <Row type="flex">
          <Col class="search-item">
            <span class="search-label">会员手机号:</span>
            <Input
              v-filterinput="{reg: regExp.nan, type: 'integerNumber'}"
              v-model="searchObj.phone"
              :maxlength="11"
              autocomplete="off"
              placeholder="请输入"
            />
          </Col>
          <Col class="search-item">
            <span class="search-label">活动名称:</span>
            <Input
              v-filterinput="{reg: /[^0-9A-Za-z\u4e00-\u9fa5]/g}"
              :maxlength="20"
              v-model="searchObj.activityName"
              autocomplete="off"
              placeholder="请输入"
            />
          </Col>
          <Col class="search-item">
            <span class="search-label">赠品类型:</span>
            <Select
              v-model="searchObj.giftType"
              @on-change="search"
              filterable
              :max-tag-count="1"
            >
              <Option
                v-for="(item, index) in giftType"
                :key="index"
                :value="item.value"
              >{{ item.label }}</Option>
            </Select>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                  type='primary'
                  @click="search"
                  >查询</Button>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                @click="reset">重置</Button>
          </Col>
        </Row>
        <Row type="flex">
          <Col class="search-item" style="padding-right:15px;">
            <Button v-if="exampleShow"
                  @click="exampleShow = !exampleShow">收起筛选
              <Icon type="ios-arrow-up" />
            </Button>
            <Button v-else
                    @click="exampleShow = !exampleShow">更多筛选
              <Icon type="ios-arrow-down" />
            </Button>
          </Col>
        </Row>
      </Row>
      <div class="search-example">
        <Row type="flex" justify="start" v-show="exampleShow">
          <Col class="search-item">
            <span class="search-label">获取方式:</span>
            <Select
                v-model="searchObj.activityType"
                class="select-shop-item"
                @on-change="search"
                filterable
                :max-tag-count="1"
              >
                <Option
                  v-for="(item, index) in activityType"
                  :key="index"
                  :value="item.value"
                >{{ item.label }}</Option>
              </Select>
          </Col>
          <Col class="search-item">
            <span class="search-label">状态:</span>
            <Select
                v-model="searchObj.status"
                @on-change="search"
                filterable
                :max-tag-count="1"
              >
                <Option
                  v-for="(item, index) in status"
                  :key="index"
                  :value="item.value"
                >{{ item.label }}</Option>
              </Select>
          </Col>
        </Row>
      </div>
    </div>
    <Table
      :loading="isloading"
      :max-height="tableData.length > 10 ? 530 : 0"
      stripe
      :columns="columns"
      :data="tableData"
    ></Table>
    <div class="page-box" style="margin-top: 20px">
      <Page
        :total="total"
        ref="pages"
        :current.sync="searchObj.pageIndex"
        :page-size="searchObj.limit"
        @on-change="handlePage"
        @on-page-size-change="handlePageSize"
        show-sizer
        show-total
      />
    </div>
  </div>
</template>
<script>
import { getCouponGift, getVerification } from '@/api/market/gift'
import regExp from '@/libs/regExp'
import errorCaptured from '@/libs/errorCaptured'
export default {
  name: 'market_gift_coupongift_list',
  data () {
    return {
      searchObj: {
        phone: '', // 手机号
        activityName: '', // 活动名称
        giftType: -1, // 礼品类型
        activityType: -1, // 活动类型
        status: -1, // 状态
        pageIndex: 1,
        limit: 10,
        offset: 0
      },
      regExp: regExp,
      exampleShow: true,
      giftType: [
        { label: '全部', value: -1 },
        { label: '代金券', value: 0 },
        { label: '折扣券', value: 1 },
        { label: '赠币券', value: 2 },
        { label: '积分', value: 3 },
        { label: '手动录入商品', value: 4 }
      ],
      activityType: [
        { label: '全部', value: -1 },
        { label: '注册赠送', value: 0 },
        { label: '刮刮乐', value: 1 },
        { label: '大转盘', value: 2 },
        { label: '幸运砸蛋', value: 3 },
        // { label: '消费赠送', value: 4 },
        // { label: '完善资料', value: 5 },
        { label: '消费赠送', value: 6 },
        { label: '定向赠送', value: 9 },
        { label: '升级赠送', value: 10 },
        { label: '分享赠送', value: 11 }
        // { label: '满减', value: 7 }
      ],
      status: [
        { label: '全部', value: -1 },
        { label: '未核销', value: 0 },
        { label: '已核销', value: 1 },
        { label: ' 已过期', value: 2 }
      ],
      isloading: false,
      total: 0,
      tableData: [],
      columns: [
        {
          title: '会员名称',
          key: 'memberName',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.phone ? params.row.memberName : '微信会员')
          }
        },
        { title: '会员手机号', key: 'phone', align: 'center' },
        {
          title: '获取方式',
          key: 'activityType',
          align: 'center',
          render: (h, params) => {
            let item = this.activityType.filter(item => Number(item.value) === Number(params.row.activityType))
            // return h('span', ['注册赠送', '刮刮乐', '大转盘', '幸运砸蛋', '', '', '消费赠送'][params.row.activityType])
            return h('span', item[0] ? item[0]['label'] : '')
          }
        },
        { title: '活动名称', key: 'activityName', align: 'center' },
        { title: '赠品名称', key: 'giftName', align: 'center' },
        {
          title: '赠品类型',
          key: 'giftType',
          align: 'center',
          render: (h, params) => {
            let item = this.giftType.filter(item => Number(item.value) === Number(params.row.giftType))[0]
            return h('span', item ? item.label : '')
          }
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          render: (h, params) => {
            return h('span', ['未核销', '已核销', '已过期'][params.row.status])
          }
        },
        { title: '获取时间  ', key: 'createTime', align: 'center' },
        {
          title: '核销时间',
          key: 'updateTime',
          align: 'center',
          render: (h, params) => {
            if (params.row.status !== 2) {
              return h('span', params.row.updateTime)
            }
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            if (params.row.giftType === 4) {
              return h(
                'Button',
                {
                  props: {
                    type: 'primary'
                  },
                  on: {
                    click: () => {
                      if (params.row.status === 0) {
                        this.$Modal.confirm({
                          title: '核销确认',
                          content: '确认核销此数据吗',
                          onOk: () => {
                            // console.log(this)
                            // console.log(params)
                            this.getVerification(params.row)
                          }
                        })
                      } else if (params.row.status === 1) {
                        // if (params.row.status === 1)
                        // console.log('查看')
                        this.$Modal.info({
                          title: '核销信息',
                          render: h => {
                            return h('Table', {
                              props: {
                                stripe: true,
                                columns: [
                                  {
                                    title: '核销人',
                                    key: 'reviewer'
                                  },
                                  {
                                    title: '核销时间',
                                    key: 'updateTime'
                                  }
                                ],
                                data: [params.row]
                              }
                            })
                          }
                        })
                      }
                    }
                  }
                },
                ['核销', '查看'][params.row.status]
              )
            }
          }
        }
      ]
    }
  },
  created () {
    this.getCouponGift()
  },
  methods: {
    search () {
      this.searchObj.pageIndex = 1
      this.searchObj.limit = 10
      this.searchObj.offset = 0
      // console.log('触发了')
      this.getCouponGift()
    },
    reset () {
      this.searchObj = {
        phone: '', // 手机号
        activityName: '', // 活动名称
        giftType: -1, // 礼品类型
        activityType: -1, // 活动类型
        status: -1, // 状态
        pageIndex: 1,
        limit: 10,
        offset: 0
      }
      this.search()
    },

    handlePageSize (val) {
      this.searchObj.limit = val
      if (this.searchObj.pageIndex === 1) {
        this.getCouponGift()
      } else {
        this.searchObj.pageIndex = 1
      }
    },
    handlePage (val) {
      // console.log(val)
      this.searchObj.offset = this.searchObj.limit * (val - 1)
      this.getCouponGift()
    },
    async getCouponGift () {
      let params = {
        ...this.searchObj,
        giftType: this.searchObj.giftType === -1 ? '' : this.searchObj.giftType, // 礼品类型
        activityType: this.searchObj.activityType === -1 ? '' : this.searchObj.activityType, // 礼品类型
        status: this.searchObj.status === -1 ? '' : this.searchObj.status // 礼品类型
      }
      this.isloading = true
      const [err, res] = await errorCaptured(getCouponGift, params)
      this.isloading = false
      if (err) return null
      if (res.status !== 200) return this.$Message.error(res.data.error)
      this.tableData = res.data.data || []
      this.total = res.data.totalCount
    },
    async getVerification (params) {
      const res = await getVerification({
        activityGiftStatusId: params.activityGiftStatusId,
        status: 1,
        reviewer: this.$store.state.user.userName,
        reviewerId: this.$store.state.user.userId
      })
      if (res.data.status !== 200) return this.$Message.error(res.data.error)
      this.$Message.success('核销成功')
      this.isloading = true
      setTimeout(() => {
        this.search()
      }, 2000)
    }
  }
}
</script>
<style lang="less" scoped>
.coupongift_list {
  // display: flex;
  // flex-direction: column;
  // min-height: 100%;
  // min-width: 1082px;
  // .from {
  //   margin-top: 24px;
  // }
  .coupongift_list-edit {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: -4px;
  }
  .button_active {
    border: 1px solid #2d8cf0;
  }
  .search-btn {
    width: 80px;
  }
}
</style>
